<template>
  <Card title="入住人次趋势" :loading="isLoading" class="wyf-card">
    <template #extra>
      <JDictSelectTag placeholder="请选择" v-model:value="params['sjfw']" dictCode="tj_sjfw" style="width: 300px" />
    </template>
    <VisitAnalysisLine :loading="isLoading" :xAxisData="sjList" :chartData="[zsList]" />
  </Card>
</template>
<script lang="ts" setup>
  import { inject, computed, ref, watch, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import VisitAnalysisLine from './VisitAnalysisLine.vue';
  import { JDictSelectTag } from '/@/components/Form';
  import { getRzrcqs } from '../api';
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
  });

  const tjfw: any = inject('tjfw');
  const params = ref({
    sjfw: '',
    tjfw: tjfw.value,
  });
  const isLoading = ref(false);
  const sjList: any = ref();
  const zsList: any = ref();
  function getData() {
    isLoading.value = true;
    getRzrcqs(params.value).then((res) => {
      console.log('入住趋势:', res);
      if (res.code == 200 && res.result) {
        sjList.value = [];
        zsList.value = [];
        const rzList = res.result.list;
        rzList.forEach((element) => {
          sjList.value.push(element.tjrq);
          zsList.value.push(element.zs);
        });
      }
      isLoading.value = false;
    });
  }
  // 监听 params 对象的变化并触发数据获取
  watch(
    () => params.value,
    () => {
      // 当 params 中的任何属性变化时触发
      getData();
    },
    {
      immediate: true, // 初始化时立即执行一次
      deep: true, // 深度监听对象内部变化
    }
  );
</script>
<style scoped lang="less">
  .wyf-card {
    height: 382px;
    :deep(.ant-card-head) {
      border: none;
    }
  }
</style>
